<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>手风琴特效</title>
		<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
		<style type="text/css">
			.accordion{
				width: 80%;
				margin: 0 auto;
			}
			
			.accordion>.title{
				background-color: #eee;
				border: 1px solid #aaa;
				padding: 6px;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.accordion>.content{
				background-color: #fee;
				/* height: 130px; */
				overflow: hidden;
			}
			
			.fade{
				height: 0;
				transition: all 0.5s linear;
			}
		
			.in{
				height: 130px;
			}
			
		</style>
	</head>
	<body>
		<div class="accordion">
			<div class="title">Title1</div>
			<div class="content fade">hello word!</div>
			
			<div class="title">Title2</div>
			<div class="content fade">hello kikty!</div>
			
			<div class="title">Title3</div>
			<div class="content fade">Hello Python!</div>	
		</div> 	
		
		
		<script type="text/javascript">
			// js版本
			// 1.初始化,所有得.content都折叠
			// 2.click .title.next().content slideDown. 其他.content.slideUp
			// $(function(){
			// 	$('.content').hide();
			// 	
			// 	$('.accordion').on('click', '.title', function(e){
			// 		// $(this) = e.target
			// 		// console.log($(this).next())
			// 		$(this).next()
			// 			.slideDown(500)
			// 			.siblings('.content').slideUp(500);
			// 	})
			// });
			
			// Class+Transition
			$(function(){
				// 1. 不需要代码初始化,因为fade已经在每个.content上了
				// 2. 使用addClass(in),和removeClass(in);
			
				$('.accordion').on('click','.title', function(e){
					$(this).next().addClass('in') //点击得显示
						.siblings('.content').removeClass('in') //其他得隐藏
				});
			});
			
		</script>
	</body>
</html>
